<template>
  <div class="lostfound">
    <div style="display: flex; justify-content: center; align-items: center; margin-top: 10px">
      <!--      <el-input-->
      <!--        v-model="searchItem"-->
      <!--        placeholder="请输入物品名称进行搜索"-->
      <!--        clearable-->
      <!--        size="medium"-->
      <!--        style="width: 300px; margin-bottom: 20px;"-->
      <!--        @keyup.enter.native="handleEnterKey"-->
      <!--        @clear="handleFilter"-->
      <!--      />-->
      <!--      <el-button v-waves class="filter-item" type="primary" style="margin-left: 10px; margin-top: -20px;" icon="el-icon-search" @click="handleFilter">-->
      <!--        搜索-->
      <!--      </el-button>-->
      <div class="selectors row">
        <div class="selectcell row">
          <label>机房：</label>
          <el-select v-model="selectRules.propRoom" placeholder="请选择" style="width: 120px">
            <el-option
              v-for="item in roomOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="selectcell row">
          <label>日期：</label>
          <div class="block">
            <span class="demonstration" />
            <el-date-picker
              v-model="selectRules.propDate"
              style="width: 140px;"
              type="date"
              placeholder="全部日期"
            />
          </div>
        </div>
        <div class="selectcell row">
          <label>类型：</label>
          <el-select v-model="selectRules.propType" placeholder="请选择" style="width: 120px">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="selectcell row">
          <label>状态：</label>
          <el-select v-model="selectRules.propState" placeholder="请选择" style="width: 120px">
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <el-button class="selectcell " @click="resetRules">重置</el-button>
        <el-button type="primary" class="selectcell " @click="query">查询</el-button>
      </div>
    </div>
    <!--

    展示区

    -->
    <div class="lost-and-found">
      <div class="lost-items">
        <div class="items-container">
          <div v-for="lostItem in lostItems" :key="lostItem.id" class="item">
            <h3>{{ lostItem.propName }}</h3>
            <el-image :src="lostItem.propPictureUrl" fit="cover" class="prop_pic" />
            <p>{{ lostItem.propDescribe }}</p>
            <div class="out_state">
              <p>机房：{{ lostItem.propRoom }}</p>
              <el-tag :type="lostItem.status">{{
                typeMap[lostItem.propType]
              }}</el-tag>
            </div>
            <div class="row out_state">
              <p>登记时间：{{ lostItem.propDate }}</p>
              <el-tag :type="lostItem.propState === '未申领' ? 'danger' : 'success'">{{
                lostItem.propState
              }}</el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="reserveDialog"
      width="50%"
    >
      <el-form ref="form" :model="lostProperty" label-width="80px">
        <!--        <el-form-item label="物品名称">-->
        <!--          <el-input v-model="lostProperty.title" :disabled="true" />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="物品描述">-->
        <!--          <el-input v-model="lostProperty.description" type="text" :disabled="true" />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="物品状态">-->
        <!--          <el-radio v-model="lostProperty.status" label="已申领" :disabled="true">已申领</el-radio>-->
        <!--          <el-radio v-model="lostProperty.status" label="未申领" :disabled="true">未申领</el-radio>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="物品图片">-->
        <!--          <img :src="lostProperty.image" style="max-width: 200px; max-height: 200px;">-->
        <!--        </el-form-item>-->
      </el-form>
    </el-dialog>
    <el-pagination
      class="switch"
      background
      :page-size="9"
      layout="prev, pager, next"
      :total="total"
      :current-page="currentPage"
      @current-change="handlePageChange"
    />
  </div>

</template>

<script>
import R from '@/assets/things/R.jpg'
import { getLostItem, getRoomNames } from '@/api/lostfound'

export default {

  filters: {
    statusFilter(status) {
      const statusMap = {
        已申领: 'success',
        未申领: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      lostItems: [],
      reserveDialog: false,
      lostProperty: {
        propName: '',
        propDescribe: '',
        propDate: ''
      },
      selectRules: {
        propState: '',
        propDate: '',
        propRoom: '',
        propType: ''
      },
      roomOptions: [],
      periodOptions: [{
        label: '全部',
        value: ''
      }, {
        label: '上午',
        value: 'MORN'
      }, {
        label: '下午',
        value: 'AFTER'
      }, {
        label: '晚上',
        value: 'EVEN'
      }],
      stateOptions: [{
        label: '全部',
        value: ''
      }, {
        label: '已申领',
        value: '已申领'
      }, {
        label: '未申领',
        value: '未申领'
      }],
      typeOptions: [{
        label: '全部',
        value: ''
      }, {
        label: '钥匙',
        value: 'KEY'
      }, {
        label: '其他',
        value: 'OTHER'
      }],
      typeMap: {
        'DAILY': '钥匙',
        'STUDY': '学习用品',
        'OFFICE': '办公用品',
        'OTHER': '其他'
      },
      filteredLostItems: [],
      searchItem: '',
      itemType: 'lost', // 默认选中失物
      totalPage: 1,
      currentPage: 1,
      total: 0,
      role: 'admin'
      // role: Cookie.get('roles')
    }
  },
  created() {
    this.handleFilter()
    this.updateItems(1)
    getRoomNames().then(res => {
      this.roomOptions.push({
        value: '',
        label: '全部'
      })
      for (const item of res.data) {
        this.roomOptions.push({
          value: item,
          label: item
        })
      }
    })
  },
  methods: {
    claimLostItem(lostItem) {
      console.log('我要申领', lostItem)
      this.reserveDialog = true
      Object.assign(this.lostProperty, this.lostItems)
      this.lostProperty.title = lostItem.propName
      this.lostProperty.id = lostItem.propId
      this.lostProperty.description = lostItem.propDescribe
      this.lostProperty.status = lostItem.propState
      this.lostProperty.image = lostItem.propPictureUrl
    },
    handleFilter() {
      if (!this.searchItem) {
        this.filteredLostItems = this.lostItems
      } else {
        this.filteredLostItems = this.lostItems.filter(item => item.title.includes(this.searchItem))
      }
    },
    handleEnterKey() {
      this.handleFilter()
    },
    updateItems(pageNumber) {
      console.log(Number(this.selectRules.propDate))
      this.selectRules.propDate = Number(this.selectRules.propDate)
      getLostItem(pageNumber, this.selectRules).then(res => {
        this.lostItems = res.data.propList
        this.total = res.data.total
        console.log(typeof this.lostItems[0].propDate)
      }).catch(res => {
        console.log(res)
      }).finally(() => {
        if (this.selectRules.propDate === 0) {
          this.selectRules.propDate = ''
        }
      })
    },
    handlePageChange(newPage) {
      this.currentPage = newPage
      this.updateItems(this.currentPage)
    },
    query() {
      this.updateItems(1)
    },
    resetRules() {
      this.selectRules.propState = ''
      this.selectRules.propRoom = ''
      this.selectRules.propDate = ''
      this.selectRules.propType = ''
      this.selectRules.propPeriod = ''
      this.updateItems(1)
    }
  }
}
</script>

<style>

.row{
  display: flex;
  flex-direction: row;
}

.lost-and-found {
  display: flex;
  justify-content: space-around;
}

.lost-items, .found-items {
  width: 90%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.items-container {
  display: flex;
  flex-wrap: wrap; /* 每行换行 */
  align-content: space-around;
}

.item {
  width: calc(33.33% - 20px); /* 每个物品占据1/3的宽度 */
  margin: 10px;
  padding: 10px;
  border: 5px solid rgb(13, 146, 255);
  border-radius: 20px;
}

.out_state {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.selectors{
}

.selectcell{
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-bottom: 10px;
}

.radio-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.switch{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.prop_pic{
  height: 300px;
  width: 100%
}
</style>
